<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card>
        <el-tabs v-model="activeName">
          <!-- 角色管理 -->
          <el-tab-pane label="角色管理" name="first">
            <el-row style="height: 60px">
              <!--
                :disabled="checkPermission('liu')"
               -->
              <el-button icon="el-icon-plus" @click="addYuan" type="primary"
                >新增角色</el-button
              >
            </el-row>
            <!-- 表格 -->
            <el-table border :data="list" style="width: 100%">
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="名称"
                width="180"
              >
              </el-table-column>
              <el-table-column align="center" prop="description" label="描述">
              </el-table-column>
              <el-table-column label="操作" width="380">
                <template slot-scope="{ row }">
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    type="success"
                    @click="assignPerm(row.id)"
                  >
                    分配权限</el-button
                  >
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    type="primary"
                    @click="editYuan(row.id)"
                    >编辑</el-button
                  >
                  <el-button
                    @click="delYuan(row.id)"
                    size="small"
                    icon="el-icon-plus"
                    type="danger"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- /表格 -->

            <!-- 分页 -->
            <el-row
              type="flex"
              align="middle"
              justify="center"
              style="height: 60px"
            >
              <el-pagination
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
              >
              </el-pagination>
            </el-row>

            <!-- /分页 -->
          </el-tab-pane>
          <!-- /角色管理 -->

          <!-- 公司信息 -->
          <el-tab-pane label="公司信息" name="second">
            <!-- 消息提示 -->
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              :closable="false"
              show-icon
            >
            </el-alert>
            <!-- /消息提示 -->

            <!-- 表单 -->
            <el-form ref="form" label-width="120px" style="margin-top: 50px">
              <el-form-item label="企业名称">
                <el-input
                  disabled
                  v-model="gongsi.name"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  disabled
                  v-model="gongsi.companyAddress"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input
                  disabled
                  v-model="gongsi.companyPhone"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  disabled
                  v-model="gongsi.mailbox"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  disabled
                  v-model="gongsi.remarks"
                  style="width: 400px"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
            <!-- /表单 -->
          </el-tab-pane>
          <!-- /公司信息 -->
        </el-tabs>
      </el-card>
      <!-- /卡片 -->

      <!-- 修改弹出层 -->
      <el-dialog
        :title="isAdd ? '添加部门' : '编辑部门'"
        :visible.sync="dialogVisible"
        width="30%"
        @close="guanbi"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="ruleForm.description"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subYuan">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /修改弹出层 -->

      <!-- 修改权限 -->
      <el-dialog
        title="分配权限"
        :visible="showPermDialog"
        @close="btnPermCancel"
      >
        <!-- 权限是一颗树 -->
        <!-- 将数据绑定到组件上 -->
        <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
        <!-- id作为唯一标识 -->
        <el-tree
          ref="permTree"
          :data="permData"
          :props="defaultProps"
          :show-checkbox="true"
          :check-strictly="true"
          :default-expand-all="true"
          :default-checked-keys="selectCheck"
          node-key="id"
        />
        <!-- 确定 取消 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button type="primary" size="small" @click="btnPermOK"
              >确定</el-button
            >
            <el-button size="small" @click="btnPermCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- /修改权限 -->
    </div>
  </div>
</template>

<script>
import {
  getRoleList,
  getCompanyInfo,
  delRole,
  getRole,
  editRole,
  addRole,
  assignPerm,
} from "@/api/setting";
import { mapGetters } from "vuex";
import { departmentData } from "@/utils";
import { getPermissionList } from "@/api/permission";
export default {
  created() {
    this.getList();
    this.getCompan();
  },
  data() {
    return {
      // table 选中的name
      activeName: "first",
      list: [], // 表格的员工信息数据
      pageSize: 10, // 当前个数
      pageNum: 1, // 当前页数
      total: 0, // 一共的条数
      gongsi: {}, // 公司数据
      dialogVisible: false, // 弹框是否显示
      isAdd: false, // 是否是 添加
      // 修改添加表单对象
      ruleForm: {
        name: "",
        description: "",
      },
      // 修改添加表单验证
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        description: [],
      },
      showPermDialog: false, // 控制分配权限弹层的显示后者隐藏
      defaultProps: {
        label: "name",
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null, // 用来记录分配角色的id
    };
  },
  computed: {
    ...mapGetters(["companId"]),
  },
  methods: {
    // 拉去数据
    async getList() {
      const { total, rows } = await getRoleList({
        page: this.pageNum,
        pagesize: this.pageSize,
      });
      this.total = total;
      this.list = rows;
    },
    // 修改当前页码
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 修改当前页个数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    // 获取公司数据
    async getCompan() {
      const data = await getCompanyInfo(this.companId);
      this.gongsi = data;
      this.gongsi.name = "河南刘士朋科技股份有限公司";
      this.gongsi.companyAddress = "河南郑州";
      this.gongsi.companyPhone = "18336110013";
      this.gongsi.mailbox = "2531800823@qq.com";
      this.gongsi.remarks = "生活不止眼前的苟且，还有诗和远方。";
    },
    // 删除员工
    async delYuan(id) {
      try {
        await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await delRole(id);
        this.getList();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } catch (error) {
        if (error === "cancel") {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        }
      }
    },
    // 修改员工
    async editYuan(id) {
      this.isAdd = false;
      this.dialogVisible = true;
      this.ruleForm = await getRole(id);
      console.log(this.ruleForm);
    },
    // 关闭 修改添加弹出框
    guanbi() {
      this.$refs.ruleForm.resetFields();
      this.ruleForm.description = "";
    },
    // 添加员工
    addYuan() {
      this.isAdd = true;
      this.dialogVisible = true;
    },
    // 提交修改 添加员工
    subYuan() {
      if (this.isAdd) {
        this.$refs.ruleForm.validate(async (flag) => {
          if (flag) {
            const data = await addRole({
              name: this.ruleForm.name,
              description: this.ruleForm.description,
            });
            this.getList();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.dialogVisible = false;
          }
        });
      } else {
        this.$refs.ruleForm.validate(async (flag) => {
          if (flag) {
            const data = await editRole(this.ruleForm);
            this.getList();
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.dialogVisible = false;
          }
        });
      }
    },
    // 点击分配权限
    // 获取权限点数据 在点击的时候调用 获取权限点数据
    async assignPerm(id) {
      this.permData = departmentData(await getPermissionList(), "0"); // 转化list到树形数据
      this.roleId = id;
      // 应该去获取 这个id的 权限点
      // 有id 就可以 id应该先记录下来
      const { permIds } = await getRole(id); // permIds是当前角色所拥有的权限点数据
      this.selectCheck = permIds; // 将当前角色所拥有的权限id赋值
      this.showPermDialog = true;
    },
    async btnPermOK() {
      // 调用el-tree的方法
      // console.log(this.$refs.permTree.getCheckedKeys())
      await assignPerm({
        permIds: this.$refs.permTree.getCheckedKeys(),
        id: this.roleId,
      });
      this.$message.success("分配权限成功");
      this.showPermDialog = false;
    },
    btnPermCancel() {
      this.selectCheck = []; // 重置数据
      this.showPermDialog = false;
    },
  },
};
</script>

<style>
</style>
